﻿@{
    ViewBag.Title = "Quản lý Phiếu Nhập";
    Layout = "~/Areas/AnnaKids/Views/Shared/_sbAdmin.cshtml";
}

<h2>@ViewBag.Title</h2>
<style type="text/css">
    .gridStyle {
        width: 100%;
        height: 300px;
    }

    .red {
        color: red;
    }
    
</style>
<a href="@Url.Content("~/Admin/ThemPhieuNhap")" class="btn btn-primary btn-mini active"><i class="icon-white icon-edit"></i> Thêm phiếu nhập</a>
<div class="clearfix"></div>
                <br />
<div class="gridStyle" data-bind="koGrid: gridOptions"></div>
<script type="text/html" id="editInput">
    <div data-bind=" attr: { 'class': 'kgCellText colt' + $index() }">
        <a data-bind="attr: { href: '#', onClick: 'alert(' + $data.getProperty($parent) + ')' }">Xóa</a>
        <a data-bind="attr: { href: '/Admin/SuaPhieuNhap/' + $data.getProperty($parent) }">Sửa</a>
    </div>
</script>
<script type="text/javascript">
    function pagingVm() {
        var self = this;
        this.myData = ko.observableArray([]);

        this.filterOptions = {
            filterText: ko.observable(""),
            useExternalFilter: true
        };

        this.pagingOptions = {
            pageSizes: ko.observableArray([50, 100, 200]),
            pageSize: ko.observable(50),
            totalServerItems: ko.observable(0),
            currentPage: ko.observable(1)
        };

        this.setPagingData = function (data, page, pageSize) {
            var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
            self.myData(pagedData);
            self.pagingOptions.totalServerItems(data.length);
        };

        this.getPagedDataAsync = function (pageSize, page, searchText) {
            setTimeout(function () {
                var data;
                if (searchText) {
                    var url = '@Url.Action("SearchFilterInputForms", "Admin")';
                    var ft = searchText.toLowerCase();
                    $.post(url, { productName: ft }, function (largeLoad) {
                        //data = largeLoad.filter(function (item) {
                        //    return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                        //});
                        //self.setPagingData(data, page, pageSize);
                        self.setPagingData(largeLoad, page, pageSize);
                    });
                } else {
                    var url = '@Url.Action("SearchInputForms", "Admin")';
                    $.post(url, function (largeLoad) {
                        self.setPagingData(largeLoad, page, pageSize);
                    });
                }
            }, 100);
        };

        //self.filterOptions.filterText.subscribe(function (data) {
        //    self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
        //});

        self.pagingOptions.pageSizes.subscribe(function (data) {
            self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
        });
        self.pagingOptions.pageSize.subscribe(function (data) {
            self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
        });
        self.pagingOptions.totalServerItems.subscribe(function (data) {
            self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
        });
        self.pagingOptions.currentPage.subscribe(function (data) {
            self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage(), self.filterOptions.filterText());
        });

        self.getPagedDataAsync(self.pagingOptions.pageSize(), self.pagingOptions.currentPage());

        this.gridOptions = {
            data: self.myData,
            jqueryUITheme: true,
            enablePaging: true,
            displaySelectionCheckbox: false,
            canSelectRows: false,
            autogenerateColumns: false,
            pagingOptions: self.pagingOptions,
            //filterOptions: self.filterOptions,
            multiSelect: false,
            showFilter: true,
            columnDefs: [{ field: 'Id', displayName: 'Edit', width: 100, sortable: false, cellTemplate: $('#editInput').html() },
                        { field: 'DateInput', displayName: 'Ngày nhập' },
                        //{ field: 'UserInput', displayName: 'Người nhập' },
                        //{ field: 'DateEdit', displayName: 'Ngày sửa' },
                        //{ field: 'UserEdit', displayName: 'Người sửa' },
                        { field: 'ShipPrice', displayName: 'Giá ship' },
                        { field: 'ProductsPrice', displayName: 'Giá các sản phẩm' },
                        { field: 'TotalAmount', displayName: 'Tổng chi' },
                        { field: 'WebsiteUrl', displayName: 'Website' }]
        };
    };
    ko.applyBindings(new pagingVm());
</script>
